import { reqspecscount, reqspecslist } from '../../http/api'
//状态
let state = {
    // 初始化数据
    list: [],
    //==== 分页===
    total: 0,//总数
    size: 3,//一页的数量
    page: 1,//当前页

}

//导出状态
let getters = {
    // 导出list
    list(state) {
        return state.list
    },
    //导出分页
    total(state) {
        return state.total
    },
    size(state) {
        return state.size
    },
    page(state) {
        return state.page
    }
}

//修改状态
let mutations = {
    // 修改list
    changeList(state, list) {
        state.list = list
    },
    // 修改总数
    changeTotal(state, total) {
        state.total = total
    },
    // 修改size
    changeSize(state, size) {
        state.size = size
    },
    // 修改page
    changepage(state, page) {
        state.page = page
    }

}

// context 将context 结构赋值，所以调用的时候省略
// 做逻辑 做异步
// let actions = {
//         reqList() {
//             // 发请求
//             reqspecslist({
//                 page: 3,
//                 size: 100
//             }).then(res => {
//                 if (res.data.code == 200) { 
//                     context.commit('changeList',res.data.list?res.data.list :[]) 
//                 }
//             })
//         }
// }
let actions = {
    reqList({ dispatch }) {
        // 触发请求列表reqSpecsList函数  
        dispatch('reqSpecsList')
        // 请求总数
        dispatch('reqTotal')
    },
    // 请求列表
    reqSpecsList({
        commit,
        dispatch,
        state: {
            size,
            page
        }
    }, all = false) {
        // 商品规格请列表是要分页的，商品管理清数据是不要分页的，，所以这里需要多传一个参数
        let params = all ? {} : {page,size}
        reqspecslist(
            // {
            //     // 此处为一个变量
            //     page:page,
            //     size
            // }   
            params).then(res => {
                if (res.data.code == 200) {
                    // 删除最后一页的最后一条数据，如果不是第一页的话，需要展示上一页的数据了。
                    /*arr是空数组： 当前页是第1页，代表就是没有数据了，那么list=arr;
                    当前页是第4页(非第1页)，代表还有数据的，只是当前这一页没有，应该取出上一页的数据给list*/
                    let arr = res.data.list ? res.data.list : []
                    if (arr.length == 0 && page != 1) {
                        // 通知mutations修改page
                        commit('changepage', page - 1);
                        // 刷新列表
                        dispatch('reqSpecsList')
                        return;
                    }
                    commit('changeList', arr)
                }
            })
    },
    // 请求总数
    reqTotal({ commit }) {
        // 发请求
        reqspecscount().then(res => {
            if (res.data.code == 200) {
                // 修改总数
                commit('changeTotal', res.data.list[0].total)

            }
        })
    },
    // 修改changePage---传一个新的page
    changePage({ commit, dispatch }, page) {
        // 修改page---修改actions中的---用commit
        commit('changepage', page)
        // 重新请求列表---触发mutations--用dispatch
        dispatch('reqSpecsList')
    }
}

export default {
    state,
    getters,
    mutations,
    actions,
    //命名空间
    namespaced: true
}



/*分页
    1.绘制分页组件
    2.初始化数据 state getters mutations
    3.进来页面，要 请列表+请总数

*/
/*
state:数据
getters：导出数据
mutations:直接修改state 同步 commit
actions:逻辑、异步，  异步   dispatch ,不可以直接修改state
*/